<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Talk Bubbles</title>
<link rel="stylesheet" type="text/css" media="all"  href="../../all.css" />
</head>
<body>
<div class="page">

	<h1>Talk Bubbles</h1>
	<p>Talk bubbles allow you to have cartoon-like talk bubbles with zero images. For now, they are based on standard module format.</p>
	<div class="line">
		<div class=" unit size1of4">
			<div class="mod bubble bubbleTop yowza">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>yowza</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of4">
			<div class="mod bubble bubbleLeft lol">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>lol</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of4">
			<div class="mod bubble bubbleRight meep">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>meep</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of4 lastUnit">
			<div class="mod bubble bubbleBottom yoyo">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>Yoyo</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
	</div>
	<h2>Extending the talk bubbles</h2>
	<div class="line">
		<div class=" unit size1of4">
			<div class="mod bubble bubbleTop yowza bubbleVerticalExt">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>yowza + bubbleVerticalExt</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of4">
			<div class="mod bubble bubbleLeft lol bubbleHorizontalExt">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>lol + bubbleHorizontalExt</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of4">
			<div class="mod bubble bubbleRight meep bubbleHorizontalExt">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>meep + bubbleHorizontalExt</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
		<div class=" unit size1of4 lastUnit">
			<div class="mod bubble bubbleBottom yoyo bubbleVerticalExt">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="hd fire">
						<h3>Yoyo + bubbleVerticalExt</h3>
					</div>
					<div class="bd">
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
		</div>
	</div>
	<h2>Suggested use:</h2>
	<div class="line">
		<div class=" unit size1of3">
			<div class="mod bubble bubbleBottom discuss">
				<b class="top"><b class="tl"></b><b class="tr"></b></b>
				<div class="inner">
					<div class="bd">
						<p>“At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.”</p>
					</div>
				</div>
				<b class="bottom"><b class="bl"></b><b class="br"></b></b>
			</div>
			<div class="media attribution">
				<a href="http://twitter.com/stubbornella" class="img"><img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella" /></a>
				<div class="bd"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></div>
			</div>
		</div>
 </div>
</div>
</body>
</html>
